<style lang="scss"></style>
<template>
  <div>
   <el-affix>
    <header>
      <div @click="toUser">
        <img class="img12" :src="headPic" alt="" />
      </div>
      <div @click="toNews">
        <img class="img13" src="../../assets/1564.png" alt="" />
      </div>
    </header>
  </el-affix>
    <div class="write">
      <div class="title">
        <img src="@/assets/images/image/hdpi/evaluation_star_s.png" alt="" />
        <input type="text" placeholder="请输入标题(最少20个字)" v-model="titledata.title" />
      </div>
      <!-- 请选择就诊科室 -->
      <div class="administrative">
        <div class="administrative_children">
          <img src="@/assets/images/image/hdpi/evaluation_star_s.png" alt="" />
          <div @click="setadmin">
            <p class="text">{{ !administrative ? '请选择就诊科室' : administrative }}</p>
            <!-- <img src="@/assets/images/image/hdpi/evaluation_star_s.png" alt="" /> -->
          </div>
        </div>
        <div class="mack" ref="mack" style="display: none">
          <div class="menubox">
            <ul class="menu">
              <li style="font-size: .3rem;"
                v-for="(v, i) in department"
                :key="i"
                @click="tabdepartment(v.departmentName, v.id)"
              >
                {{ v.departmentName }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 请选择主要病症 -->
      <div class="disease">
        <div class="diseasechildren">
          <img src="@/assets/images/image/hdpi/evaluation_star_s.png" alt="" />
          <div>
            <p class="text">
              {{ !disease ? '请选择主要病症' : disease }}
            </p>
            <img
              src="@/assets/images/icon/common resource/hdpi//circle_icon_drop_down_n.png"
              class="arrows"
              alt=""
            />
          </div>
        </div>
        <div class="mack1" ref="macks" style="display: none" >
          <div class="menubox">
            <ul class="menu1">
              <li v-for="(v, i) in diseaselist" :key="i" @click="todeiease(v.name)" style="font-size: .3rem;">
                {{ v.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 病症详情 -->
      <div class="deteil">
        <img src="@/assets/images/image/hdpi/evaluation_star_s.png" alt="" />
        <div>
          <textarea
            name=""
            id=""
            cols="44"
            rows="14"
            placeholder="请输入病症详情"
            v-model="titledata.detail"
          ></textarea>
          <p class="hints">不超过300字</p>
        </div>
        <div class="cheng"></div>
      </div>
      <div class="Treatment">
        <div class="Treatment_hander">
          <p>请输入最近一段治疗经历</p>
        </div>
        <div class="Treatment_content">
          <div class="hospital">
            <input
              type="text"
              placeholder="请输入医院名称"
              name=""
              id=""
              v-model="titledata.treatmentHospital"
            />
          </div>
          <!-- <van-time-picker
          v-model="currentStartDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onStartConfirm"
          @cancel="onStartCancel"
        /> -->
        <van-cell title="请选择开始时间" :value="date" @click="show = true"  class="startTime" style="font-size: .3rem;color: rgb(117, 117, 117); line-height: .5rem;padding-left: .45rem;"/>
<van-calendar v-model:show="show" @confirm="onConfirm"  class="arrows"/>
        <van-cell title="请选择结束时间" :value="date1" @click="show1 = true" class="overTime" style="font-size: .3rem;color: rgb(117, 117, 117);line-height: .5rem;padding-left: .45rem;"/>
<van-calendar v-model:show="show1" @confirm="onConfirm1"  class="arrows"/>

          <!-- <div class="startTime" @click="showStartTimePicker">
            <p class="text">{{ !starttime ? '请选择开始时间' : starttime }}</p>
            <img src="../../assets/images/image/hdpi/h_currency.png" class="arrows" alt="" />
            <div v-if="showStartPicker">
              <van-time-picker
                :v-model="currentStartDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onStartConfirm"
                @cancel="onStartCancel"
              />
            </div>
          </div>

          <div class="overTime" @click="showEndTimePicker">
            <p class="text">{{ !endtime ? '请选择结束时间' : endtime }}</p>
            <img src="../../assets/images/image/hdpi/h_currency.png" class="arrows" alt="" />
            <div class="DatetimePicker1" v-if="showEndPicker">
              <van-time-picker
                :v-model="currentEndDate"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onEndConfirm"
                @cancel="onEndCancel"
              />
            </div>
          </div> -->
          <textarea
            name=""
            id=""
            cols="51"
            rows="8"
            placeholder="请输入治疗过程"
            v-model="treatmentProcess" class="yqyq"
          ></textarea>
        </div>
      </div>
      <div class="hint">
        <p>最多添加6张图片:长按为图片排序</p>
      </div>
      <index></index>
      <!-- <div class="uploadbox">
        <div class="uploadchildren">
          <van-uploader
            v-model="fileList"
            multiple
            ref="inputRef"
            :max-count="6"
            :after-read="afterRead"
          />

        </div>
      </div> -->
      <div class="hint">
        <p>提升悬赏额度</p>
        <van-switch
          v-model="checked"
          @change="changeswitch"
          size=".6rem"
          style="margin-right: 20px"
        />
      </div>
      <div class="Reward_amount" style="display: block" ref="amount">
        <p>提升额度可获得更多的关注，得到更多的建议</p>
        <div class="Radiobtn">
          <button
            v-for="(item, ind) in HB"
            :key="ind"
            :class="{ active: active === ind }"
            @click="handleButtonClick(item, ind)"
          >
            {{ item + 'HB' }}
          </button>

          <input type="text" placeholder="自定义H币" class="active" style="font-size: .35rem;"/>
          <p class="top_up">
            当前H币余额300.不足？去<span @click="$router.push('/recharge')">充值</span>
          </p>
        </div>
      </div>
      <button class="submit" @click="handlesubmit">发布</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import homeTop2 from '../../components/homeTop2/index.vue'
import { ref } from 'vue'
import { getgord, getDiseaseCategory, getpublishSickCircle } from '../../api/api'
import { useRouter } from 'vue-router'
import index from '../../components/index1.vue'

const checked = ref(true)
const mack = ref()
const macks = ref()
const department: any = ref([])
const departmentId = ref(1)
const administrative = ref('')
const disease = ref('')
const diseaselist: any = ref([])
const starttime = ref('')
const endtime = ref('')
const minDate = ref(new Date(2020, 0, 1))
const maxDate = ref(new Date(2025, 10, 1))
const currentDate = ref(new Date(2021, 10, 17))
const currentStartDate = ref(new Date())
const currentEndDate = ref(new Date())
const hideDatetimePicter = ref(true)
const datatimepicter = ref()
const fileList = ref([])
const item = ref({})
const amount = ref()
const HB = ref([10, 20, 30])
const active = ref(-1)
const ind = ref(3)
const treatmentProcess = ref('')
const showStartPicker = ref(false)
const showEndPicker = ref(false)
const router = useRouter()
const titledata = ref({
  title: '',
  detail: '',
  treatmentHospital: '',
  amount: ''
})
const userId = ref(localStorage.getItem('userId'))
const sessionId = ref(Number(localStorage.getItem('sessionId')?.replace(/"/g, '')) || 0)
console.log(userId.value, sessionId.value)
  const date = ref('');
  const date1=ref('')

    const show = ref(false);
    const show1 = ref(false);
    const formatDate = (date) => {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    };
      const formatDate1 = (date) => {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    };
        const onConfirm1= (value) => {
      show1.value = false;
      date1.value = formatDate1(value);
    };
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };



//  点击显示就诊室
const setadmin = () => {
  if (mack.value) {
    mack.value.style.display = 'block' // 设置 display 属性
  }
}
// 获取科室标题数据
const getGetgord = async () => {
  const { data: res } = await getgord()
  console.log(res)
  department.value = res.result
  departmentId.value = 1 // 设置默认科室ID
}
getGetgord()
// 点击切换科室标题数据
const tabdepartment = (departmentName: any, id: any) => {
  departmentId.value = id
  administrative.value = departmentName
  mack.value.style.display = 'none'
  macks.value.style.display = 'block'
  const getDiseaseCategorylist = async () => {
    const { data: res } = await getDiseaseCategory({
      departmentId: departmentId.value
    })
    console.log(res.result)
    diseaselist.value = res.result
  }
  getDiseaseCategorylist()
}
// 点击切换主要病症
const todeiease = (name: any) => {
  //   departmentId.value = id
  disease.value = name
  macks.value.style.display = 'none'
}
// 时间
// const confirm = () => {
//   const dateString = currentDate.value.toString().replace(/ GMT.+$/, '') // or substring(0, 24)
//   const d = new Date(dateString)
//   const a:any = [
//     d.getFullYear(),
//     d.getMonth() + 1,
//     d.getDate(),
//     d.getHours(),
//     d.getMinutes(),
//     d.getSeconds()
//   ]
//   for (let i = 0; i < a.length; i++) {
//     if (a[i] < 10) {
//       a[i] = '0' + a[i]
//     }
//   }
//   starttime.value = `${a[0]}-${a[1]}-${a[2]}`
// //   hideDatetimePicter.value = true
//   if (datatimepicter.value) {
//     datatimepicter.value.style.display = 'true' // Use ref to manipulate DOM directly if needed
//   }
// }
// const showStartTimePicker = () => {
//   showStartPicker.value = true
//   showEndPicker.value = false // 关闭结束时间选择器
// }
// const showEndTimePicker = () => {
//   showEndPicker.value = true
//   showStartPicker.value = false // 关闭开始时间选择器
// }
// const onStartConfirm = (value: any) => {
//   //   starttime.value = value.toLocaleDateString() // 格式化为字符串
//   showStartPicker.value = false // 关闭选择器
//   console.log(111)
// }

// const onStartCancel = () => {
//   showStartPicker.value = false // 关闭选择器
//   console.log(111)
// }

// const onEndConfirm = (value: any) => {
//   endtime.value = value.toLocaleDateString() // 格式化为字符串
//   showEndPicker.value = false // 关闭选择器
// }

// const onEndCancel = () => {
//   showEndPicker.value = false // 关闭选择器
// }

// // 上传图片
// const afterRead = (file: any) => {
//   item.value = file.file
// }
// 切换悬赏方式
const changeswitch = () => {
  if (!checked.value) {
    amount.value.style.display = 'none'
  } else {
    amount.value.style.display = 'block'
  }
}
// 点击切换HB
const handleButtonClick = (v: any, i: any) => {
  active.value = i
  titledata.value.amount = v
}
// 点击发布
const handlesubmit = async () => {
  const { data: res } = await getpublishSickCircle(
    {
      title: titledata.value.title,
      departmentId: departmentId.value,
      disease: disease.value,
      detail: titledata.value.detail,
      tittreatmentHospitalle: titledata.value.treatmentHospital,
      treatmentStartTime: starttime.value,
      treatmentEndTime: endtime.value,
      treatmentProcess: treatmentProcess.value,
      amount: titledata.value.amount,
      administrative: administrative.value
    },
    {
      headers: {
        userId: userId.value,
        sessionId: sessionId.value,
        'Content-Type': 'application/json'
      }
    }
  )
  console.log(res)
  router.push('/circle')
}
const toUser=()=>{
router.push('/my')
}
const toNews=()=>{
  router.push('/my_message')
}
// 修改头像
const headPic = localStorage.getItem('headpic')
</script>
<style scoped lang="scss">
 header {
    width: 100%;
    height: 1.5rem;
    background-color: #fff;
    position: relative;

  }

.img12 {
  width: 1rem;
  height: 1rem;

  position: absolute;
  top: 0.3rem;
  left: 0.5rem;
  border-radius: 50%;
}
.cheng{
  width: 100%;
  height: 1rem;
}
.img13 {
  position: absolute;
  width: 1rem;
  height: 1rem;

  top: .28rem;
  right: 0.2rem;
}
.menubox {
  width: 100vw;
  padding: 10px 0;
  background-color: #f2f2f2;
  position: relative;
  .menu {
    width: calc(100vw - 40px);
    margin: 0 20px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    li {
      width: 25%;
      margin: 10px 0;
      font-size: 12px;
      color: #333;
    }
  }
  .menu1 {
    width: calc(100vw - 80px);
    margin: 0 20px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    li {
      width: 25%;
      margin: 10px 0;
      font-size: 12px;
      color: #333;
    }
  }
}
.yqyq{
    padding-left: .18rem;
    font-size: .3rem;
}
.write {
  margin-top: .5rem;
  width: 100vw;
  height: auto;
  background-color: white;
  color: rgb(91, 91, 91);
  .title {
    width: calc(100vw - 40px);
    height: 1.2rem;
    margin: 0 20px;
  border-bottom: 1px solid #b0acac;
    display: flex;

    img {
      margin-top: 10px;
      width: 12px;
      height: 12px;
    }

    input {
      flex: 1;
      margin-top: 10px;
      height: 33px;
      margin-left: .1rem;
      font-size: .4rem;
      border: 0;
    }
  }

  .administrative {
    width: 100vw;
    height: 1.2rem;
    position: relative;

    .administrative_children {
      display: flex;
      width: calc(100vw - 40px);
      height: 1.2rem;
      margin: 0 20px;
  border-bottom: 1px solid #b0acac;

      img {
        margin-top: 10px;
        width: 12px;
        height: 12px;
      }

      div {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        align-items: center;
        width: 100%;
        .text {
          font-size: .4rem;
          height: 34px;
          line-height: 34px;  margin-left: .1rem;
        }

        .arrows {
          width: 16px;
          height: 12px;
          font-size: .4rem;
          margin: 0;
          margin-right: 6px;
        }
      }
    }

    .mack {
      position: absolute;
      left: 0;
      top: 1rem;
      width: 100%;
      height: auto;
      z-index: 999;
    }
  }

  .disease {
    width: 100%;
    height: 1rem;
position: relative;
    .diseasechildren {
      width: calc(100vw - 40px);
   height: 1.2rem;
      margin: 0 20px;
  border-bottom: 1px solid #b0acac;
      display: flex;


      img {
        margin-top: 10px;
        width: 12px;
        height: 12px;
      }

      div {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        align-items: center;

        .text {
          font-size: .4rem;
          height: 34px;
          line-height: 34px;  margin-left: .1rem;
        }

        .arrows {
          width: 16px;
          height: 12px;
          margin: 0;
          margin-right: 6px;
        }
      }
    }
    .mack1 {
      position: absolute;
      left: 0;
      top: 1rem;
      width: 100%;
      height: auto;
      z-index: 999;
    }
  }

  .deteil {
    margin-top: .2rem;
    width: 100%;
margin-left: .2rem;
height: 5rem;
   border-bottom: 1px solid #b0acac;
    display: flex;

    img {margin-left: .35rem;
      margin-top: 10px;
      width: 12px;
      height: 12px;
    }

    div {
      margin-top: 16px;
      position: relative;

      textarea {

        height: 4rem;
        display: 1;
        padding-left: .15rem;
        font-size: .35rem;
        border: 0;
      }

      .hints {

        position: absolute;
        bottom: 5px;
        right: 0%;
        font-size: .25rem;
        color: #3087ea;
      }
    }
  }

  .Treatment {
    width: 100%;

    .Treatment_hander {
width: 100%;
background-color: rgb(242,242,242 );


      margin-top: 6px;
      .Process {
        border: 1px solid #ccc;
        width: calc(100% - 10px);
        height: 32px;
        font-size: 12px;
        text-indent: 10px;
      }
      p {
        padding-left: .2rem;
        height: 1rem;
        line-height: 1rem;
        font-size: .4rem;
     color: rgb(91, 91, 91);
      }
    }

    .Treatment_content {
      width: calc(100vw - 40px);
      margin-top:.4rem;
      margin-left: .5rem;
      border: 1px solid #b0acac;
      border-radius: 6px;
      .hospital {
        width: 97%;
        margin-top: 6px;
        border-bottom: 1px solid #b0acac;
         padding-left: .3rem;

        input {
          border: 0;

          width: 70%;
          height: 1rem;
          font-size: .3rem;
          text-indent: 10px;
        }
      }

      .startTime {
        width: 100%;
        display: flex;
        justify-content: space-between;
       border-bottom: 1px solid #b0acac;
        margin-top: 18px;
        align-items: center;
        position: relative;
        .text {
          font-size: .4rem;
          height: 22px;
          text-indent: 10px;

        }

        .arrows {
          width: .8rem;
          height: .8rem;
          margin: 0;
          margin-right: 6px;
        }
      }

      .overTime {
        width: 100%;
        display: flex;
        justify-content: space-between;
    border-bottom: 1px solid #b0acac;
        margin-top: 18px;
        align-items: center;
        position: relative;
        .text {
          font-size: .4rem;
          height: 22px;
          text-indent: 10px;
        }

        .arrows {
          width: 16px;
          height: 12px;
          margin: 0;
          margin-right: 6px;
        }
      }

      textarea {
        margin-top: 16px;
        border: 0;
        text-indent: 10px;
      }
    }
  }

  > .hint {
    width: 100%;
    height: 1rem;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: space-between;
    position: relative;

    p {
      margin-left: 10px;
      font-size: .35rem;
    color: rgb(91, 91, 91);
    }

    .switch {
      position: absolute;
      right: 20px;
      width: 40px;
      height: 20px;
    }
  }

  .uploadbox {
    width: 100%;
    height: auto;

    .uploadchildren {
      width: calc(100vw - 40px);
      margin: 10px;

      img {
        width: 72px;
        height: 72px;
        margin: 10px;
      }
    }
  }

  .Reward_amount {
    width: calc(100vw - 40px);
    margin: 20px;
    height: 3.5rem;
    position: relative;
    p {
      font-size:.35rem;
   color: rgb(91, 91, 91);
    }
    .Radiobtn {
      width: 100%;
      height: 124px;

      button {
        margin-top: 10px;
        width: 25%;
        height: 1rem;
        margin-right: 6px;
        border: 1px solid #ddd;
        background-color: white;
      color: rgb(91, 91, 91);
        font-size: .3rem;
        margin-left: .15rem;
        box-sizing: border-box;
      }
      input {
        margin-top: 10px;
        width: 104px;
        height: 50px;
        margin-right: 6px;
        border: 1px solid #ddd;
        background-color: white;
        color: #999;
        font-size: 16px;
        box-sizing: border-box;
        text-align: center;
      }
      .active {
        background-color: #3087ea;
color: #fff;
        width: 25%;
        height: 1rem;
        margin-left: .15rem;
      }

      .top_up {
        position: absolute;
        right: 0%;
        bottom: 7%;
        transform: translateY(10px);
        display: inline-block;
        color: #333;
        font-size: .32rem;
        span {
          color: #3087ea;
        }
      }
    }
  }

  .submit {
    width: 9rem;
    height: 1rem;
    margin-top: 20px;
margin-left: .5rem;
    margin-bottom: 30px;
    background-color: #3087ea;
    font-size: .3rem;
    color: #fff;
    border: 0;
    border-radius: 4px;
  }
}
.DatetimePicker {
  width: 100%;
  position: absolute;
  top: 20px;
  z-index: 10;
  // transform: translate(-50%, -50%);
}

.DatetimePicker1 {
  width: 100%;
  position: absolute;
  top: 20px;
  z-index: 10;
  // transform: translate(-50%, -50%);
}
.active {
  color: #fff;
}
.active::placeholder{
  color: #fff;
}
</style>
